<template>
    <div class="tableContent">
        <Table class="resizable-table"
               @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,this.customCacheKeyDp)}" border
               :columns="columns" :data="dataSource">
            <template slot-scope="{ row,index }" slot="action">
                <div class="ivu-table-cell-slot" v-if="!disabled">
                    <span class="operationBtn" v-if="row.operation ==='action'" @click="addItem">{{ $t('新增') }}</span>
                    <span v-if="row.operation !=='action'" class="operationBtn"
                          @click="removeItem(index)">{{ $t('删除') }}</span>
                    <span v-if="row.operation !=='action' && !row.edit " class="operationBtn"
                          @click="editItem(index)">{{ row.edit ? $t('更新') : $t('编辑') }}</span>
                    <span v-if="row.operation !=='action' && row.edit " class="operationBtn"
                          @click="saveItem(index)">{{ $t('提交') }}</span>
                    <span v-if="row.operation !=='action' && row.edit " class="operationBtn"
                          @click="cancelSaveItem(index)">{{ $t('取消') }}</span>
                </div>
            </template>
            <template slot-scope="{ row,index }" slot="slot1">
                <Input maxlength="200" v-model.trim="dataSource[index].glAccount" :placeholder="$t('请输入')"
                       v-if="row.operation !=='action'  && dataSource[index].edit"/>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].glAccount }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="slot2">
                <Input maxlength="200" v-model.trim="dataSource[index].accountName" :placeholder="$t('请输入')"
                       v-if="row.operation !=='action'  && dataSource[index].edit"/>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].accountName }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="slot3">
                <Input maxlength="200" v-model.trim="dataSource[index].ba" :placeholder="$t('请输入')"
                       v-if="row.operation !=='action'  && dataSource[index].edit"/>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].ba }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="slot4">
                <Input maxlength="200" v-model.trim="dataSource[index].dr" :placeholder="$t('请输入')"
                       v-if="row.operation !=='action'  && dataSource[index].edit"/>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].dr }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="slot5">
                <Input maxlength="200" v-model.trim="dataSource[index].cr" :placeholder="$t('请输入')"
                       v-if="row.operation !=='action'  && dataSource[index].edit"/>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].cr }}</p>
            </template>
            <template slot-scope="{ row,index }" slot="slot6">
                <Input maxlength="200" v-model.trim="dataSource[index].remark" :placeholder="$t('请输入')"
                       v-if="row.operation !=='action'  && dataSource[index].edit"/>
                <p class="breakSpaces" style="text-align: left" v-else>{{ dataSource[index].remark }}</p>
            </template>
        </Table>
    </div>
</template>
<script>
const totalComlumns = {desc: "", amount: 0, operation: "action", id: ""}
import minixs from './mixins'

export default {
    name: "downPayment",
    props: ['list', 'disabled', 'type'],
    mixins: [minixs],
    data() {
        return {
            dataSource: [{...totalComlumns}],
            columns: [
                {
                    title: this.$t('银行账户'),
                    key: "glAccount",
                    slot: "slot1",
                    resizable:true,
                    width:150,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: this.$t('银行账户')
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: this.$t('账户名称'),
                    key: "accountName",
                    slot: "slot2",
                    resizable:true,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: this.$t('账户名称')
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: "BA",
                    key: "ba",
                    slot: "slot3",
                    resizable:true,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: 'BA'
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: 'Dr (借)',
                    key: "dr",
                    slot: "slot4",
                    resizable:true,
                    renderHeader: (h) => {
                        return h('div', [
                            h('span', {
                                domProps: {
                                    innerHTML: 'Dr (借)',
                                },
                                attrs: {
                                    class: "required "
                                }
                            }),
                        ])
                    }
                },
                {
                    title: 'Cr (贷)',
                    key: "cr",
                    slot: "slot5",
                    resizable:true
                },
                {
                    title: this.$t('备注'),
                    key: "remark",
                    slot: "slot6",
                    resizable:true
                },
                {
                    title: this.$t('操作'),
                    key: "Items",
                    slot: "action",
                    width: 250,
                    align: "center"
                }
            ],
            activeIndex: 0,
            customCacheKeyDp: ""
        }
    },
    mounted() {
        this.customCacheKeyDp = "capexDownPayment" + this.type;
        this.getColumnWidth(this.columns, this.customCacheKeyDp)

        this.$forceUpdate()

        this.dataSource = []
        if (Array.isArray(this.list) && this.list.length > 0) {
            const _list = this.list.map((item) => {
                item.indexCode = Math.random()
                item.edit = false
                return item;
            })
            this.dataSource = JSON.parse(JSON.stringify(_list))
        }

        if (!this.disabled)
            this.dataSource.push({...totalComlumns})
        this.copyDataSource = JSON.parse(JSON.stringify(this.dataSource))
    },
    methods: {
        saveItem(index) {

            this.activeIndex = index

            if (!this.dataSource[this.activeIndex].glAccount) {
                this.$Message.error(this.$t('请输入'))
                return;
            }
            if (!this.dataSource[this.activeIndex].accountName) {
                this.$Message.error(this.$t('请输入'))
                return;
            }
            if (!this.dataSource[this.activeIndex].ba) {
                this.$Message.error(this.$t('请输入'))
                return;
            }
            if (!this.dataSource[this.activeIndex].dr) {
                this.$Message.error(this.$t('请输入'))
                return;
            }
            // if (!this.dataSource[this.activeIndex].remark) {
            //   this.$Message.error(this.$t('请输入'))
            //   return;
            // }

            this.dataSource[this.activeIndex]['edit'] = false
            this.$forceUpdate()
        },
        cancelSaveItem(index) {
            const obj = this.copyDataSource.find(item => {
                if (this.dataSource[index].indexCode === item.indexCode)
                    return item
            })

            if (obj)
                this.dataSource.splice(index, 1, {...obj, edit: false})
            else
                this.dataSource.splice(index, 1)
            this.$forceUpdate()
        },
        checkEditStatus() {
            const obj = this.dataSource.find(item => item.edit)
            if (obj) {
                this.$Message.error(this.$t('请先保存'))
                return true
            } else {
                return false
            }
        },
        editItem(index) {
            if (this.checkEditStatus()) return false
            this.dataSource[index]['edit'] = true
            this.activeIndex = index
            this.copyDataSource = JSON.parse(JSON.stringify(this.dataSource))

            console.log(this.dataSource)
            this.$forceUpdate()
        },
        addItem() {
            if (this.checkEditStatus()) return false
            const id = Math.random()
            const obj = {
                indexCode: id,
                glAccount: "", accountName: "", ba: "", dr: "", cr: "", remark: "",
                edit: true
            }
            this.dataSource.splice(this.dataSource.length - 1, 0, obj)
        },
        removeItem(index) {
            this.dataSource.splice(index, 1)
        },
        getParams() {
            if (this.checkEditStatus()) return false
            let list = JSON.parse(JSON.stringify(this.dataSource))
            list.splice(list.length - 1, 1)
            return list;
        }
    }
}
</script>
